<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>了解年化收益</title>
    <link rel="stylesheet" href="../mui/css/mui.min.css" type="text/css" />
    <link rel="stylesheet" href="../css/base.css" type="text/css" />
    <link rel="stylesheet" href="../css/style.css" type="text/css" />
</head>

<body class="bgc-fff">
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back"><i class="icon icon-back"></i></a>
	<h1 class="mui-title">了解年化收益</h1>
</header>
<div class="mui-content">
	<div class="rate-top">
    	<div class="rate-chart" id="rateChart"></div>
        <div class="rate-word"><h4>12.16</h4><p>年化收益(%)</p></div>
        <div>
            <a href="javascript:;" class="rate-link rlink-1"><i class="icon icon-ratetb1"></i><p>人脉关系</p></a>
            <a href="javascript:;" class="rate-link rlink-2"><i class="icon icon-ratetb2"></i><p>购物行为</p></a>
            <a href="javascript:;" class="rate-link rlink-3"><i class="icon icon-ratetb3"></i><p>使用频率</p></a>
            <a href="javascript:;" class="rate-link rlink-4"><i class="icon icon-ratetb4"></i><p>分享频率</p></a>
            <a href="javascript:;" class="rate-link rlink-5"><i class="icon icon-ratetb5"></i><p>消费能力</p></a>
        </div>
    </div>
    <div class="rate-box">
    	<div class="rate-tit">我的年化收益等级</div>
        <div class="rate-bar">
        	<div class="progress" style="width:40%"></div>
            <i class="bar-rule rule-1">较差</i>
            <i class="bar-rule rule-2">良好</i>
            <i class="bar-rule rule-3">优秀</i>
            <i class="bar-rule rule-4">极好</i>
        </div>
        <ul class="rate-rule mt25">
        	<li><label>·</label>频繁地使用靓粉吧购物</li>
        	<li><label>·</label>多消费实物类商品，如衣服、箱包、化妆品等等</li>
        	<li><label>·</label>邀请好友使用靓粉吧，好友每一笔消费均可增加年化收益</li>
        	<li><label>·</label>多分享也会使年化收益增加哟</li>
        </ul>
    	<div class="plr50 mt30"><a href="生钱-提升年化收益.html" class="c-btn c-btn-red">提升年化收益</a></div>
    </div>
    
    <!--介绍-->
    <div class="ratejs-hold c-hide">
    	<div class="ratejs-pop">
        	<a href="javascript:;" class="ratejs-close"><i class="icon icon-jsclose"></i></a>
        	<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
                    	<div class="rs-img"><img src="../images/rate/rs-img1.png" alt="" /></div>
                        <h4>人脉关系</h4>
                        <p>您的好友邀请数量、好友使用频次和消费情况。</p>
                    </div>
					<div class="swiper-slide">
                    	<div class="rs-img"><img src="../images/rate/rs-img2.png" alt="" /></div>
                        <h4>购物行为</h4>
                        <p>购物行为是您购物过程中提现的行为特点，过去的退款会影响得分。</p>
                    </div>
					<div class="swiper-slide">
                    	<div class="rs-img"><img src="../images/rate/rs-img3.png" alt="" /></div>
                        <h4>使用频率</h4>
                        <p>使用软件的频率及购物频率。</p>
                    </div>
					<div class="swiper-slide">
                    	<div class="rs-img"><img src="../images/rate/rs-img4.png" alt="" /></div>
                        <h4>分享频率</h4>
                        <p>您分享软件、商品的频次，分享效果也会统计。</p>
                    </div>
					<div class="swiper-slide">
                    	<div class="rs-img"><img src="../images/rate/rs-img5.png" alt="" /></div>
                        <h4>消费能力</h4>
                        <p>您的消费品类、金额，决定您的消费力。</p>
                    </div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
        </div>
    	<div class="ratejs-pop-mb"></div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../mui/js/mui.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../widget/echart/js/echarts.min.js"></script>
<link rel="stylesheet" href="../widget/swiper/css/swiper.min.css" type="text/css" />
<script type="text/javascript" src="../widget/swiper/js/swiper.min.js"></script>
<script type="text/javascript">
//介绍
var sp = false,swiper;
$('.mui-content').on('click','.rate-link',function(){
	$('.ratejs-hold').show();
	var index = $(this).index();
	if(!sp){
		swiper = new Swiper('.swiper-container', {
			pagination: {
				el: '.swiper-pagination',
				clickable:true
			},
		});
		sp = true;
	}
	swiper.slideTo(index, 0, true);
});
$('.mui-content').on('click','.ratejs-close,.ratejs-pop-mb',function(){
	$('.ratejs-hold').hide();
});
//图表
var rateChart = echarts.init(document.getElementById('rateChart'));
option = {
    title: {
		show: false,
        text: '年化利率'
    },
    tooltip: {
		show: false
	},
    legend: {
		show: false
    },
    radar: {
        shape: 'circle',
		center: ['50%', '50%'],
		axisLine:{
			show: false
		},
		splitLine:{
			show: false
		},
		axisLabel:{
			show: false
		},
		splitArea: {
			show: false
		},
        name: {
			show: false,
            textStyle: {
				show: false
           }
        },
        indicator: [
           { name: '人脉关系',max:50000},
           { name: '购物行为',max:50000},
           { name: '使用频率',max:50000},
           { name: '分享频率',max:50000},
           { name: '消费能力',max:50000}
        ]
    },
    series: [{
        name: '年化收益',
        type: 'radar',
        areaStyle: {normal: {}},
        symbol: 'none',
		label:{
			normal: {
				show: false
			},
			emphasis:{
				show:false	
			}
		},
        data : [
            {
                value : [13000, 50000, 48000, 35000, 40000],
                name : '年化收益',
				areaStyle: {
					normal: {
						opacity: 0.9,
						color: new echarts.graphic.RadialGradient(1, 1, 1, [
							{
								color: '#ff425d',
								offset: 0
							}
						])
					}
				},
				lineStyle:{
					normal: {
						opacity: 0,
					}
				}
            }
        ]
    }]
};
rateChart.setOption(option);
</script>
</body>
</html>